<script setup>
import {
  GetTypeUsageAnalysisAPI,
  GetTypeSupplierAnalysisAPI,
} from "@/api/statisticAnalysis/mold";

const { proxy } = getCurrentInstance();

/**
 * 字典查询
 */
const { sys_tool_staus } = proxy.useDict("sys_tool_staus");
// 查询条件 枚举
const selectList = ref([
  {
    label: "设备类型",
    type: "输入框",
    model: "mouldType",
  },
]);
/**
 *报表搜索
 */
const reportSelectList = ref([
  {
    label: "设备类型",
    type: "输入框",
    model: "mouldType",
  },
  {
    label: "供应商",
    type: "输入框",
    model: "factoryName",
  },
]);
/**
 * tabs
 */
const activeName = ref("类型");

/**
 * 表单实例
 */
const ruleFormRef = ref(null);
/**
 * 表单
 */
const ruleForm = ref({});

/**
 * 树结构枚举
 */
const defaultProps = {
  children: "children",
  label: "categoryName",
  value: "id",
};
/**
 * 按钮
 */
const buttonList = ref([
  // { type: 'export', hasPermi: 'statisticAnalysis:mold:export' },
]);
/**
 * 表单实例
 */
const submitFormRef = ref(null);

/**
 * 类型赛选条件
 */

const query = reactive({
  pageNum: 1,
  pageSize: 10,
});
/**
 *供应商赛选条件
 */

const supplieQuery = reactive({
  pageNum: 1,
  pageSize: 10,
});
/**
 * 列表枚举
 */
const supploierColumn = ref([
  { label: "刀具类型", prop: "mouldType", width: "300" },
  { label: "供应商", prop: "factoryName", width: "300" },
  { label: "最长时间(H)", prop: "maxTime", width: "300" },
  { label: "最低时间(H)", prop: "minTime", width: "300" },
  { label: "平均使用时间", prop: "avgTime", width: "auto" },
]);
/**
 * 列表枚举
 */
const column = ref([
  { label: "设备类型", prop: "mouldType", width: "400" },
  { label: "最长时间(H)", prop: "maxTime", width: "400" },
  { label: "最低时间(H)", prop: "minTime", width: "400" },
  { label: "平均使用时间", prop: "avgTime", width: "auto" },
]);
/**
 * 类型类别
 */
const tableData = ref([]);
/**
 * 供应商列表
 */
const supploierData = ref([]);

/**
 * 各种状态
 */
const state = reactive({
  loading: false,
  total: 0,
  btnLoading: false,
  isShow: false,
  title: "新增",
  row: [],
  ids: [],
  treeShow: false, //树结构弹窗
});
// 条件查询
const selectSubmit = (obj) => {
  Object.keys(obj).forEach((itemKey) => (query[itemKey] = obj[itemKey]));
  getTypeUsageAnalysis();
};

// 供应商条件查询
const SupplierSubmit = (obj) => {
  Object.keys(obj).forEach((itemKey) => (supplieQuery[itemKey] = obj[itemKey]));
  getTypeSupplierAnalysis();
};
/**
 * 类型
 */
const getTypeUsageAnalysis = async () => {
  try {
    const res = await GetTypeUsageAnalysisAPI(query);
    console.log(res, res);
    state.total = res.total;
    tableData.value = res.rows;
  } catch (err) {
  } finally {
  }
};

getTypeUsageAnalysis();

/**
 * 类型
 */
const getTypeSupplierAnalysis = async () => {
  try {
    const res = await GetTypeSupplierAnalysisAPI(supplieQuery);
    console.log(res, res);
    state.total = res.total;
    supploierData.value = res.rows;
  } catch (err) {
  } finally {
  }
};

getTypeSupplierAnalysis();
</script>

<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          type="card"
          @tab-click="handleClick"
        >
          <el-tab-pane label="类型" name="类型">
            <div class="Echarts">
              <p-select-form
                :selectForm="selectList"
                @selectSubmit="selectSubmit"
              />
              <p-table
                class="tableClass"
                height="500"
                :isSel="false"
                :data="tableData"
                v-model:page="query.pageNum"
                v-model:limit="query.pageSize"
                :total="state.total"
                @change="handleSelectionChange"
                @pagination="getTypeSupplierAnalysis"
                :column="column"
              >
                <template #buttons>
                  <!-- 按钮组件 -->
                  <p-button :list="buttonList" @add="addDic" />
                </template>
              </p-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="供应商" name="供应商">
            <div class="Echarts">
              <p-select-form
                :selectForm="reportSelectList"
                @selectSubmit="SupplierSubmit"
              />
              <p-table
                class="tableClass"
                :isSel="false"
                height="500"
                :data="supploierData"
                v-model:page="supplieQuery.pageNum"
                v-model:limit="supplieQuery.pageSize"
                :total="state.total"
                @change="handleSelectionChange"
                @pagination="getTypeUsageAnalysis"
                :column="supploierColumn"
              >
                <template #buttons>
                  <!-- 按钮组件 -->
                  <p-button :list="buttonList" @add="addDic" />
                </template>
              </p-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  background-color: #f4f4f4;
}
.card-tree {
  height: 50rem;
  overflow: auto;
}
.show {
  background-color: #169bd5 !important;
  color: #fff;
}
.demo-tabs {
  background-color: #fff;
}
.Echarts {
  background-color: #fff;
  padding: 20px;
  // height: 745px;
  .box {
    height: 700px;
  }
}
.card {
  height: 50rem;
  // overflow: auto;
}
.card-header {
  display: flex;
  justify-content: space-between;
}
.tabs {
  display: flex;
  .tabs-list {
    padding: 10px;
    background-color: #e3e3e3;
    margin-right: 10px;
    cursor: pointer;
  }
}
::v-deep .el-input__suffix-inner {
  display: flex !important;
  align-items: center !important;
}
</style>
